<!DOCTYPE html>
<html dir="ltr">
<head>
  <meta charset="utf-8">

  <title>Input areas</title>
  <link rel="stylesheet" href="../input_areas.css">

  <!--
    This <style> and <link> is only used for the example code, is no needed for the real case use
  -->
  <style>
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }
    body { background: none; }
    h2.bb-docs {
      padding: 0.4rem 3rem;
      margin: -0.1rem 0 0;
      border: solid 0.1rem #e8e8e8;
      color: #666;
      font-size: 1.8rem;
      font-weight: lighter;
      background-color: #f5f5f5;
    }
    form { margin: 1rem 2rem; }

    form[role="search"] button.icon-attachment:before {
      background-image: url();
    }
  </style>
</head>

<body role="application">
  <p dir="ltr">
    <label>
      <input type="checkbox"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>

    <h2 class="bb-docs">Default inputs</h2>
    <form>
      <p>
        <input type="text" placeholder="Placeholder" required>
        <button type="reset">Clear</button>
      </p>

      <p>
        <textarea placeholder="Placeholder in textarea" required></textarea>
      </p>

      <p>
        <input type="text" placeholder="Placeholder" value="Some written text" required>
        <button type="reset">Clear</button>
      </p>
    </form>

    <h2 class="bb-docs">Fieldset</h2>
     <form>
      <fieldset>
        <legend class="action">Mobile</legend>
        <section>
          <p>
            <input type="tel" placeholder="Phone number" required>
            <button type="reset">Clear</button>
          </p>
          <p>
            <input type="text" placeholder="Name" value="Jessy James" required>
            <button type="reset">Clear</button>
          </p>
        </section>
      </fieldset>

      <fieldset>
        <legend>Work</legend>
        <section>
          <p>
            <input type="tel" placeholder="Email" required>
            <button type="reset">Clear</button>
          </p>
        </section>
      </fieldset>
     </form>

    <h2 class="bb-docs">Forms: Input text</h2>

    <form role="search">
      <p>
        <input type="text" placeholder="Search..." required>
        <button type="reset">Clear</button>
      </p>
    </form>

    <form role="search">
      <button type="submit">Cancel</button>
      <p>
        <input type="text" placeholder="Search..." required value="Some text here">
        <button type="reset">Clear</button>
      </p>
    </form>

    <form role="search" class="skin-dark">
      <p>
        <input type="text" placeholder="Search..." required>
        <button type="reset">Clear</button>
      </p>
    </form>

    <form role="search" class="skin-dark">
      <button type="submit">Cancel</button>
      <p>
        <input type="text" placeholder="Search..." required value="Some text here">
        <button type="reset">Clear</button>
      </p>
    </form>

    <h2 class="bb-docs">Forms: Text area</h2>

    <form role="search" class="bottom">
      <!-- this button should be enabled after start typing in the input field-->
      <button type="submit" disabled>Send</button>
      <p>
        <textarea required></textarea>
      </p>
    </form>

    <form role="search" class="bottom">
      <button class="icon icon-attachment">Attachment</button>
      <button type="submit">Send</button>
      <p>
        <textarea required>Some text here</textarea>
      </p>
    </form>

</body>
</html>
